<template>
  <div>
    <div id="Hot">
      <div class="title">
        <div>
          <ul class="e-left">
            <li>
              <el-link
                :underline="false"
                href="#"
                target="_blank"
                class="e-title"
                >热门推荐</el-link
              >
            </li>
            <li>
              <a><el-link>中国</el-link></a>
            </li>
            <li><span>|</span></li>
            <li>
              <a><el-link>台湾</el-link></a>
            </li>
            <li><span>|</span></li>
            <li>
              <a><el-link>香港</el-link></a>
            </li>
            <li><span>|</span></li>
            <li>
              <a><el-link>日本</el-link></a>
            </li>
          </ul>
          <ul class="e-right">
            <li><router-link to="/Playlist">更多</router-link></li>
          </ul>
        </div>
      </div>
    </div>
    <div id="content">
      <div class="container">
        <div class="for-list" v-for="item in Playlists" :key="item.id">
          <div class="d-img">
            <div class="funcation">123</div>
            <a href="#"><img class="img" :src="getimg(item.playlistImg)" alt="" /></a>
            <div class="comment">{{item.PlaylistName}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //数组接收res
      Playlists: [],
      getimg(src) {
        return require("../../../assets/images/" + src);
      },
    };
  },
  //页面加载后自动调用
  mounted() {
      this.GetPlaylist();
    
  },
  methods: {
    //获取热门歌单
    GetPlaylist: function () {
      var thisvue = this;
      this.$http
        .get("http://localhost:31551/api/Playlist/GetPlaylistsHits/")
        .then(function (res) {
          thisvue.Playlists = res.data;
        });
    },
  },
};
</script>